<template>
  <div class="singer-wrap">
    <h1>云音乐歌手榜</h1>

    <!-- 类型 -->
    <ul>
      <li v-for="(item,index) in area" :key="index" @click="transformTypeSinger(item)"><span :class="{active: isActive === item.name}">{{item.name}}</span></li>
    </ul>

    <!-- 歌手排行 -->
    <ol>
      <li v-for="(item,index) in singerlist" :key="index" @click="itemClick(item)">
        <span class="top">{{index+1}}</span>
        <img v-lazy="item.img1v1Url" alt="" v-if="singerlist.length!==0">
        <span class="author" :class="{author1: index>2}">{{item.name}}</span>
        <span class="hot" :class="{warm: index>2}">热度：{{item.score}}</span>
      </li>
    </ol>
  </div>
</template>

<script>
import { getSingerList } from '@/api/singer'

export default {
  name: 'SingerLeaderBoard',
  created() {
    this.getSingerData()
  },
  data() {
    return {
      area: [{ name: '华语', area: 1 }, { name: '欧美', area: 2 }, { name: '韩国', area: 3 }, { name: '日本', area: 4 }],
      isActive: '华语',
      singerlist: []
    }
  },
  methods: {
    async getSingerData() {
      const { data: res } = await getSingerList()
      this.singerlist = res.list.artists
      console.log(res)
    },
    itemClick(item) {
      window.sessionStorage.setItem('singerId', item.id)
      this.$router.push('/home/singerDetail')
    },
    async transformTypeSinger(item) {
      this.isActive = item.name
      const { data: res } = await getSingerList(item.area)
      console.log(res)
      this.singerlist = res.list.artists

    }
  }
}
</script>

<style lang="less" scoped>
.singer-wrap {
  padding-top: 10px;
  h1 {
    font-size: 18px;
  }
  ul {
    display: flex;
    li {
      margin: 5px 14px 10px 0;
      span {
        &.active {
          color: hotpink;
        }
      }
    }
  }
  ol {
    li {
      display: flex;
      align-items: center;
      padding: 20px 0;
      position: relative;
      width: 100%;
      &:hover {
        background: rgba(0, 0, 0, 0.1);
      }
      &:nth-child(-n + 3) {
        display: inline-block;
        width: 30%;
        margin: 0 15px;
        .top {
          position: relative;
          color: hotpink;
          font-size: 45px;
        }
        .author {
          position: relative;
          top: 20px;
          left: 15px;
        }
        .hot {
          position: relative;
          left: 40px;
          top: 20px;
          display: block;
          color: #666;
        }
        img {
          float: right;
        }
      }
      img {
        width: 100px;
        height: 100px;
      }
      .top {
        margin: 0 10px;
      }
      .author1 {
        margin-left: 10px;
      }
      .warm {
        position: absolute;
        right: 10px;
        top: 50%;
        color: #666;
        transform: translate(0, -50%);
      }
    }
  }
}
</style>